<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <link rel="stylesheet" href="css/headerCss.css">
    <style>
        .demo1 {
        }

        .dem {
            border: 1px solid #e5e5e5;
            width: 950px;
            margin: 40px auto 0 auto;
            min-height: 530px;
        }

        /*屏幕宽度*/
        .front {
            width: 400px;
            margin: 5px 32px 45px 32px;
            background-color: #f0f0f0;
            color: #666;
            text-align: center;
            padding: 3px;
            border-radius: 5px;
        }

        /*右边宽度*/
        .booking-details {
            float: right;
            /*position: relative;*/
            margin-right: 50px;
            width: 340px;
            height: 490px;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .booking-details h3 {
            margin: 5px 5px 0 0;
            font-size: 16px;
        }

        .booking-details p {
            line-height: 26px;
            font-size: 16px;
            color: #999
        }

        .booking-details p span {
            color: #666
        }

        div.seatCharts-cell {

            color: #182C4E;
            width: 30px;
            height: 26px;
            line-height: 25px;
            margin: 0 5px;;
            float: left;
            text-align: center;
            outline: none;
            font-size: 13px;
        }

        div.seatCharts-seat {
            width: 30px;
            height: 26px;
            margin: 0 5px;
            color: rgba(0, 0, 0, 0);
            background-image: url("imgs/choose_seatImg/sold_seat.JPG");
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        div.seatCharts-row {
            height: 35px;
        }

        div.seatCharts-seat.available {
            background-image: url("imgs/choose_seatImg/selectable_seat.JPG")
        }

        div.seatCharts-seat.focused {
            background-image: url("imgs/choose_seatImg/selectable_seat.JPG")
        }

        div.seatCharts-seat.selected {
            background-image: url("imgs/choose_seatImg/selected_seat.JPG")
        }

        div.seatCharts-seat.unavailable {
            background-color: #472B34;
            cursor: not-allowed;
        }

        /*座位宽度*/
        div.seatCharts-container {
            border-right: 1px dotted #adadad;
            width: 450px;
            padding: 20px;
            float: left;
        }

        div.seatCharts-legend {
            padding-left: 0px;
            position: absolute;
            bottom: 16px;
        }

        ul.seatCharts-legendList {
            padding-left: 0px;
        }

        .seatCharts-legendItem {
            float: left;
            width: 90px;
            margin-top: 10px;
            line-height: 2;
        }

        span.seatCharts-legendDescription {
            margin-left: 5px;
            line-height: 30px;
        }

        .checkout-button {
            cursor: pointer;
            width: 120px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            border-radius: 21px;
            position: relative;
            bottom: 70px;
            left: 200px;
            background-color: #f03d37;
            border: 0;
        }

        #selected-seats {
            max-height: 150px;
            overflow-y: auto;
            width: 400px;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        #selected-seats input {
            display: none;
        }

        #selected-seats li {
            float: left;
            width: 72px;
            height: 26px;
            line-height: 26px;
            border: 1px solid #d3d3d3;
            background: #f7f7f7;
            margin: 5px;
            font-size: 14px;
            font-weight: bold;
            text-align: center
        }

        #seat_style {
            width: 100%;
        }

        #seat_style ul {
            list-style-type: none;
            padding: 0;
            margin: 0 0 0 60px;
            overflow: hidden;
        }

        #seat_style ul li {
            float: left;
            margin: 20px 20px 10px 20px;
            font-size: 16px;
            color: #666;
            height: 26px;
            line-height: 26px;
        }

        #seat_style > ul > li > img {
            position: relative;
            top: 5px;
            right: 5px;
        }


        .info {
            width: 100%;
        }

        .poster {
            display: inline-block;
            width: 115px;
            height: 158px;
            border: 2px solid white;
        }

        .content {
            display: inline-block;
            position: relative;
            bottom: 50px;
        }

        .name {
            font-size: 20px;
            font-weight: 700;
        }

        .info-item {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }

        .value {
            color: #151515;
            margin-left: 2px;
        }

        .info-item {
            margin-bottom: 9px;
            font-size: 16px;
        }

        .show-info {
            border-bottom: 1px solid #e5e5e5;
        }

        .screen {
            color: #f03d37;
        }

        #total {
            color: red;
        }

        #counter {
            color: blue;
        }

        .order-progress {
            height: 60px;
            width: 1200px;
            margin: 40px auto;
            text-align: center;
        }

        .step {
            float: left;
            width: 25%;
        }

        .step-num {
            color: #fff;
            font-size: 12px;
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            border-radius: 10px;
            text-align: center;
            background-color: #f03d37;
            position: relative;
            top: 10px;
        }

        .bar {
            width: 0;
            height: 4px;
            border-left: 150px solid #ffd8d7;
            border-right: 150px solid #ffd8d7;
        }

        .step-text {
            font-size: 14px;
            color: #f03d37;
            display: inline-block;
            margin-top: 10px;
        }
        .login{
            bottom: -15px;
        }
        .has-login{
            bottom: -28px;
        }
        .has-login a{
            bottom: 15px;
        }
    </style>

    </head>

<body>
<myheader :search="search"></myheader>
<div style="height: 60px"></div>
<div class="order-progress">
    <div class="step">
        <span class="step-num">1</span>
        <div class="bar" style="border-left-color: transparent!important;
        border-color: #f03d37;"></div>
        <span class="step-text">选择影片场次</span>
    </div>
    <div class="step done">
        <span class="step-num">2</span>
        <div class="bar" style="border-color: #f03d37;"></div>
        <span class="step-text">选择座位</span>
    </div>
    <div class="step ">
        <span class="step-num" style="background-color: #ffd8d7">3</span>
        <div class="bar" ></div>
        <span class="step-text">14分钟内付款</span>
    </div>
    <div class="step last ">
        <span class="step-num" style="background-color: #ffd8d7">4</span>
        <div class="bar" style="border-right-color: transparent!important"></div>
        <span class="step-text">影院取票观影</span>
    </div>
</div>
<div id="main">

    <div class="dem">

        <div id="seat-map">
            <div id="seat_style">
                <ul>
                    <li><img width="30" height="26" src="imgs/choose_seatImg/selectable_seat.JPG" alt="">可选择</li>
                    <li><img width="30" height="26" src="imgs/choose_seatImg/selected_seat.JPG" alt="">已选择</li>
                    <li><img width="30" height="26" src="imgs/choose_seatImg/sold_seat.JPG" alt="">已售出</li>
                </ul>
            </div>
            <div class="front">屏幕</div>
        </div>
        <div class="booking-details">
            <div class="info">
                <div class="poster">
                    <img width="100" :src="movie.url" alt="1">
                </div>
                <div class="content">
                    <p class="name" style="color: black;font-size: 23px">{{movie.name}}</p>
                    <div class="info-item">
                        <span>类型 :</span>
                        <span class="value">{{movie.category}}</span>
                    </div>
                    <div class="info-item">
                        <span>时长 :</span>
                        <span class="value">{{movie.duration}}分钟</span>
                    </div>
                </div>
                <div class="show-info">
                    <div class="info-item">
                        <span>影院 :</span>
                        <span class="value ">{{movie.cinemaName}}</span>
                    </div>
                    <div class="info-item">
                        <span>影厅 :</span>
                        <span class="value ">{{movie.hallName}}</span>
                    </div>
                    <div class="info-item">
                        <span>版本 :</span>
                        <span class="value">中文2D</span>
                    </div>
                    <div class="info-item">
                        <span>场次 :</span>
                        <span class="value  screen">{{movie.startDate}}</span>
                    </div>
                    <div class="info-item">
                        <span>票价 :</span>
                        <span class="value text-ellipsis">￥{{movie.price}}/张</span>
                    </div>
                </div>

                <form   id="form"  action="" method="post">
                    <span class="info-item" style="display: inline-block;margin-top: 15px">座位：</span>
                    <ul id="selected-seats"></ul>
                    <div class="pay">
                        <p style="color: blue">票数：<span id="counter">0</span></p>
                        <p style="color: red">总计：<b>￥<span id="total">0</span></b></p>
                    </div>
                    <input type="text" v-model="sessionId" style="display: none" name="sessionId">
                    <input type="text" v-model="totalPrice" style="display: none" name="totalPrice">
                    <button type="button" class="checkout-button" @click="addOrder()">确定购买</button>
                </form>

            </div>
            <div style="clear:both"></div>

        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/jquery.seat-charts.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: "#main",
        data: {
            map: [],//座位表
            seat:[],//已选座位
            movie:{},
            totalPrice:"",//总价格
            sessionId:"",//场次id
            orderId:""//订单id
        },
        created: function () {
            let id=location.search.split("=")[1]//获取session_id
            axios.get("/session/layout?id="+id).then(function (response) {
                vm.map = response.data.split(",");//给座位表赋值
                vm.sessionId=id;
            })
            axios.get("/movie/sessionMovie?id="+id).then(function (response) {
                vm.movie=response.data;
                vm.movie.startDate = moment(vm.movie.startDate)
                    .format("YYYY年MM月DD日 HH:mm");
            })
            axios.get("/seat/selectSeat?id="+id).then(function (response) {
                vm.seat=response.data

                $(document).ready(function () {
                    var $cart = $('#selected-seats'), //座位区
                        $counter = $('#counter'), //票数
                        $total = $('#total'); //总计金额
                    var index=0;
                    var sc = $('#seat-map').seatCharts({
                        map: vm.map,
                        naming: {
                            top: false,
                            left: true,
                            rows: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                            getLabel: function (character, row, column) {
                                return column;
                            }
                        },
                        click: function () { //点击事件
                            if (this.status() == 'available') { //可选座
                                $('<li >' + (this.settings.row + 1) + '排' + this.settings.label + '座' +
                                    '<input name=\"seatNo\" value=\"' + (this.settings.row + 1) + '_' + this.settings.label + '\" >' +
                                    '</li>')
                                    .attr('id', 'cart-item-' + this.settings.id)
                                    .data('seatId', this.settings.id)
                                    .appendTo($cart);
                                $counter.text(sc.find('selected').length + 1);
                                $total.text(recalculateTotal(sc) + price);
                                return 'selected';
                            } else if (this.status() == 'selected') { //已选中
                                //更新数量
                                $counter.text(sc.find('selected').length - 1);
                                //更新总计
                                $total.text(recalculateTotal(sc) - price);

                                //删除已预订座位
                                $('#cart-item-' + this.settings.id).remove();
                                //可选座
                                return 'available';
                            } else if (this.status() == 'unavailable') { //已售出
                                return 'unavailable';
                            } else {
                                return this.style();
                            }
                        }
                    });

                    var seat=[];
                    for (let i = 0; i <vm.seat.length ; i++) {
                        seat.push(""+vm.seat[i])
                    }
                    sc.get(seat).status('unavailable');
                    $('.checkout-button').css({'background-color': 'grey', 'pointer-events': 'none'})
                    $('.available').on('click', function () {
                        var checklen = $('.selected').length;
                        if (checklen == 0) {
                            $('.checkout-button').css({'background-color': 'grey', 'pointer-events': 'none'})
                        } else if (checklen >0){
                            $('.checkout-button').css({
                                'background-color': '#f03d37',
                                'cursor': 'pointer',
                                'pointer-events': 'auto'
                            })
                        }
                        if (checklen > 3) {
                            $(".available").css('pointer-events', 'none');
                            alert('最多只能选择四个座位')

                        } else {
                            $(".available").css('pointer-events', 'auto');
                        }

                    });
                })

                var price=0;
                axios.get("/session/price?id="+id).then(function (response) {
                  price =response.data
                })
                //计算总金额
                function recalculateTotal(sc) {
                    var total = 0;
                    sc.find('selected').each(function () {
                        total += price;
                    });
                    vm.totalPrice=total+price;
                    return total;
                }
            })

        },
        methods:{
            addOrder:function () {
                let data=new FormData(document.querySelector("#form"))
                axios.post("/order/insertOrder",data).then(function (response) {
                    if (response.data==-1){
                        alert("选座错误!")
                        location.href="/chooseseat.html?id="+vm.sessionId;
                        return
                    }
                    vm.orderId=response.data;
                   axios.get("/order/cancel?id="+vm.orderId).then(function (response) {
                        location.href="/pay.html?orderId="+vm.orderId;
                   }).catch(function (error) {
                        alert(error)
                   })
                })
            }
        }
    })

</script>

</body>
</html>